
        // 轮播数据
        const carouselData = [
            {
                image: '../resources/images/youtube.png',
                title: 'Online Tutorials',
                description: 'youtube'
            },
            {
                image: '../resources/images/bilibili.png',
                title: '码农盲盒',
                description: 'bilibili'
            },
            {
                image: '../resources/images/github.png',
                title: 'market',
                description: 'github'
            },
            {
                image: '../resources/images/山羊.png',
                title: '山羊的前端小窝',
                description: 'bilibili'
            },
            {
                image: '../resources/images/wangwen.png',
                title: 'wangwen',
                description: 'https://wangwen135.github.io/'
            }
        ];

        // 轮播组件类
        class Carousel {
            constructor(container, data) {
                this.container = container;
                this.data = data;
                this.currentIndex = 0;
                this.interval = null;
                
                this.init();
                this.startAutoPlay();
            }
            
            // 初始化轮播
            init() {
                this.createCarouselItems();
                this.createIndicators();
                this.addEventListeners();
                this.showSlide(this.currentIndex);
            }
            
            // 创建轮播项
            createCarouselItems() {
                const carousel = this.container.querySelector('.carousel');
                
                this.data.forEach(item => {
                    const carouselItem = document.createElement('div');
                    carouselItem.className = 'carousel-item';
                    
                    carouselItem.innerHTML = `
                        <img src="${item.image}" alt="${item.title}" class="carousel-image">
                        <div class="carousel-content">
                            <h3 class="carousel-title">${item.title}</h3>
                            <p class="carousel-description">${item.description}</p>
                        </div>
                    `;
                    
                    carousel.appendChild(carouselItem);
                });
            }
            
            // 创建指示器
            createIndicators() {
                const indicatorsContainer = this.container.querySelector('.carousel-indicators');
                
                this.data.forEach((_, index) => {
                    const indicator = document.createElement('div');
                    indicator.className = 'indicator';
                    if (index === 0) indicator.classList.add('active');
                    
                    indicator.addEventListener('click', () => {
                        this.showSlide(index);
                    });
                    
                    indicatorsContainer.appendChild(indicator);
                });
            }
            
            // 添加事件监听
            addEventListeners() {
                const prevBtn = this.container.querySelector('.prev');
                const nextBtn = this.container.querySelector('.next');
                
                prevBtn.addEventListener('click', () => {
                    this.prevSlide();
                });
                
                nextBtn.addEventListener('click', () => {
                    this.nextSlide();
                });
                
                // 鼠标悬停时暂停自动轮播
                this.container.addEventListener('mouseenter', () => {
                    this.stopAutoPlay();
                });
                
                this.container.addEventListener('mouseleave', () => {
                    this.startAutoPlay();
                });
            }
            
            // 显示指定索引的幻灯片
            showSlide(index) {
                const carousel = this.container.querySelector('.carousel');
                const indicators = this.container.querySelectorAll('.indicator');
                
                // 更新当前索引
                this.currentIndex = index;
                
                // 移动轮播图
                carousel.style.transform = `translateX(-${index * 100}%)`;
                
                // 更新指示器状态
                indicators.forEach((indicator, i) => {
                    if (i === index) {
                        indicator.classList.add('active');
                    } else {
                        indicator.classList.remove('active');
                    }
                });
            }
            
            // 下一张幻灯片
            nextSlide() {
                const nextIndex = (this.currentIndex + 1) % this.data.length;
                this.showSlide(nextIndex);
            }
            
            // 上一张幻灯片
            prevSlide() {
                const prevIndex = (this.currentIndex - 1 + this.data.length) % this.data.length;
                this.showSlide(prevIndex);
            }
            
            // 开始自动轮播
            startAutoPlay() {
                this.interval = setInterval(() => {
                    this.nextSlide();
                }, 4000); // 每4秒切换一次
            }
            
            // 停止自动轮播
            stopAutoPlay() {
                if (this.interval) {
                    clearInterval(this.interval);
                    this.interval = null;
                }
            }
        }
        
        // 初始化轮播
        document.addEventListener('DOMContentLoaded', () => {
            const carouselContainer = document.querySelector('.carousel-container');
            new Carousel(carouselContainer, carouselData);
        });
